import { ElButton, ElCheckbox, ElCheckboxGroup, ElCol, ElForm, ElFormItem, ElInput, ElInputNumber, FormInstance, FormRules } from "element-plus"
import { cloneDeep } from "lodash-es"
import { Dialog } from "~/src/api/interface"
import { System } from "~/src/api/interface/system"
import { User } from "~/src/api/interface/user"
import { getFrontDeskMenuAPI } from "~/src/api/system"
import { createRoleFrontAPI, editRoleFrontAPI } from "~/src/api/user"
import VabDialog from '/@vab/components/VabDialog/index.vue'

export type RoleFrontDialogExpose = {
  setParams: (data: Dialog<User.RoleFront>) => void;
};
export default defineComponent({
  name: "RoleFrontDialog",
  props: {
    title: {
      type: String,
      default:""
    },
    data: {}
  },
  emits: ["onOk"],
  setup(props, {  expose,emit}) {

    const formdata = ref<Dialog<User.RoleFront>>({
      data: {
       name: "",
      maxDiscount: "",
      maxReduceAmount: "",
      roleMenuIds: [],
      remark: ""},title:"",visible:false})
    const setParams = async(data:Dialog<User.RoleFront>) => {
      formdata.value.title = data.title
      formdata.value.data = cloneDeep(data.data)
      console.log(formdata.value.data.roleMenuIds);

      formdata.value.data.roleMenuIds  = formdata.value.data.roleMenuIds ? formdata.value.data.roleMenuIds :[]
      await getRoleMenuList()
      formdata.value.visible = true
    }
    const rules = reactive<FormRules>({
      name:[{required:true,message:'请输入名称',trigger:'blur'}],
      roleMenuIds:[{required:true,message:'最少选择一项'}]
    })
    const formRef = ref<FormInstance>()
    watch(() => formdata.value.visible, (val) => {
      if (!val) {
        formRef.value?.resetFields()
      }
    })

    const onSubmit = async () => {
      await formRef.value?.validate()
      if (formdata.value.data.id) {
        await editRoleFrontAPI(formdata.value.data)
      } else {
        await createRoleFrontAPI(formdata.value.data)
      }
      emit("onOk")
      formdata.value.visible = false
    }
    const roleMenuList = ref<System.FrontDeskMenu[]>([])
    const getRoleMenuList = async() => {
      const res = await getFrontDeskMenuAPI({ pageSize: 999, pageNum: 1 })
      roleMenuList.value = res.data.list
    }

    expose<RoleFrontDialogExpose>({ setParams })

    return () =>
    <VabDialog v-model:modelValue={formdata.value.visible} title={formdata.value.title + '前台角色'} width="600"
    v-slots={{ footer: () => (
      <>
        <ElButton type="primary" onClick={onSubmit}>保存</ElButton>
        <ElButton onClick={()=> formdata.value.visible = false}>取消</ElButton>
      </>
        )
        }}
      >
      {
      <ElForm ref={formRef} rules={rules} model={formdata.value.data}  label-width={120}  label-suffix="：">
        <ElFormItem prop={'name'} label="名称">
        <ElInput v-model={formdata.value.data.name}/>
        </ElFormItem>
        <ElFormItem prop={'maxReduceAmount'} label="最大优惠金额">
        <ElInputNumber align="left" style={{width:'100%'}} controls={false} v-model={formdata.value.data.maxReduceAmount}/>
        </ElFormItem>
        <ElFormItem prop={'maxDiscount'} label="最大折扣">
              <ElInputNumber max={0.9} align="left" style={{ width: '100%' }} controls={false} v-model={formdata.value.data.maxDiscount} />
              <ElCol>(提示:请输小数点数字，0.9表示9折，0表示不限制。)</ElCol>
        </ElFormItem>
            <ElFormItem prop={'roleMenuIds'} label="菜单权限" >
          <ElCheckboxGroup  v-model={formdata.value.data.roleMenuIds} multiple style={{height:'300px',overflow:'auto',width:"100%"}}>
                {roleMenuList.value.map(item => (
                <ElCheckbox key={item.id} label={item.name} value={item.id} style={{ display:"block"}}/>
              ))}
          </ElCheckboxGroup>
        </ElFormItem>
        <ElFormItem prop={'remark'} label="备注">
              <ElInput type={'textarea'} v-model={ formdata.value.data.remark} />
        </ElFormItem>
      </ElForm>
}
    </VabDialog >

  }
})
